<template>
  <!-- 项目轮播图管理 -->
  <div class="systemRoleManage-container">
    <BaseBreadcrumb>
      <searchData class="search" :searchData="searchOptions" @search="handleSearch" />
      <a-card>
        <!-- <title-name title="项目列表" /> -->
        <list-table
          ref="table"
          :columns="columns"
          :request="loadData"
          :alert="true"
          rowKey="projectId"
        >
          <template slot="index" slot-scope="text, record, index">
            <span>{{ index + 1 }}</span>
          </template>
          <template slot="action" slot-scope="text, record">
            <a class="base-btn" v-btnPermission="'sy_001_loo_01'" @click="handleUpdate('look', record)">查看</a>
            <a-divider type="vertical" v-btnPermission="'sy_001_edi_02'" />
            <a class="base-btn" v-btnPermission="'sy_001_edi_02'" @click="handleUpdate('edit', record)">编辑图片</a>
          </template>
        </list-table>
      </a-card>
      
      <a-modal v-model="formModal.visible"
        :keyboard="!colseBtn"
        :closable="!colseBtn"
        :maskClosable="false"
        width="760px"
        centered
      >
        <!-- :title="modalTitle" -->
        <template slot="title">
          {{modalTitle}}
          <span v-if="formModal.modalType=='edit'" style="font-size: 14px;color: red;">Tips：上传或删除图片后，必须确认提交结果，无法取消编辑。</span>
        </template>
        <a-form-model :model="formModal.form" layout="inline">
          <a-form-model-item label="项目名称">
            <a-input disabled v-model="formModal.form.name" />
          </a-form-model-item>
          <a-form-model-item label="分公司">
            <a-input disabled v-model="formModal.form.implUnit3Name" />
          </a-form-model-item>
          <a-form-model-item label="项目编号">
            <a-input disabled v-model="formModal.form.code" />
          </a-form-model-item>
          <a-form-model-item label="项目经理">
            <a-input disabled v-model="formModal.form.realityPmName" />
          </a-form-model-item>
          <a-form-model-item label="APP项目轮播图片">
            <upload-list
              class="upload-list"
              :businessCode="'PM29'"
              :count="4"
              :editModel="filterEditModel(formModal.modalType)"
              :uploadArrys.sync="formModal.form.imgList"
              @fileArrysData="imgChanged"
              uploadType="image"
              :isMultiple="true"
              multiple
            ></upload-list>
            <span>备注：建议上传大小在5M以内，尺寸比例建议为16:9。</span>
          </a-form-model-item>
        </a-form-model>
        <template slot="footer">
          <a-button :disabled="colseBtn" key="back" @click="formModal.visible=false">
            {{ formModal.modalType == 'look' ? '关闭' : '取消' }}
          </a-button>
          <a-button v-if="formModal.modalType=='edit'" key="submit" type="primary" :loading="formModal.loading" @click="bindImg">
            确认
          </a-button>
        </template>
      </a-modal>
    </BaseBreadcrumb>
  </div>
</template>

<script>
import UploadList from '@/components/UploadList'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import OrgTreeSelect from '@/components/OrgTreeSelect'
import { packageConfirm } from '@/utils/baseAction.js'
import { getRoleManageList, deleteRoleList } from '@/api/system/system.js'
import { getProjectImagesList, projectImagesSetting, getImages } from '@/api/system/appManage.js'
// import AddResource from './AddResource.vue'
import { STable } from '@/components'
const searchOptions = [
  {
    name: '项目名称/编号/经理',
    value: 'nameOrCodeOrManager',
    type: 'input',
  },
  {
    name: '所属单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  // {
  //   name: '分公司',
  //   valueKey: 'branchComId',
  //   type: SelectSubCompany
  // },
]

const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    width: 60,
    scopedSlots: { customRender: 'index' },
  },
  {
    title: '项目名称',
    ellipsis: true,
    dataIndex: 'name',
  },
  {
    title: '分公司名称',
    ellipsis: true,
    dataIndex: 'implUnit3Name',
  },
  {
    title: '项目编码',
    width: 120,
    ellipsis: true,
    dataIndex: 'code',
  },
  {
    title: '项目经理',
    width: 120,
    ellipsis: true,
    dataIndex: 'realityPmName',
  },
  {
    title: '项目状态',
    width: 120,
    ellipsis: true,
    dataIndex: 'statusString',
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 140,
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+Date.now(),
  components: {
    STable,
    UploadList
    // AddResource,
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      childInitData: {},
      disabledClose: false,
      formModal: {
        modalType: 'edit',
        title: '编辑图片',
        visible: false,
        loading: false,
        form: {
          name: '',
          implUnit3Name: '',
          code: '',
          realityPmName: '',
          imgList: []
        }
      },
      searchOptions,
      columns,
      queryParam: {
        needCount: true
      },
      statisticsInfo: {
        totalNum: 0,
      },
    }
  },
  watch: {
    // 'formModal.form.imgList': {
    //   handler(){
    //   }
    // }
  },
  computed: {
    colseBtn() {
      return this.formModal.modalType == 'edit' && this.disabledClose;
    },
    modalTitle() {
      return this.formModal.modalType == 'edit' ? '编辑图片' : '查看图片'
    }
  },
  methods: {
    imgChanged() {
      this.disabledClose = true
    },
    bindImg() {
      this.formModal.loading = true;
      let fileIds = []
      // console.log(this.formModal.form.imgList)
      this.formModal.form.imgList.forEach((item, index) => {
        item.commonId && fileIds.push(item.commonId)
      })
      const params = {
        "projectId": this.formModal.form.projectId,
        "shufflingFileIds": fileIds
      }
      // console.log(params)
      projectImagesSetting(params).then((res) => {
        this.formModal.loading = false;
        this.formModal.visible = false;
        if (res && res.data && res.data.code == 200) {
          this.$message.success('图片设置成功')
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
          this.$message.error('图片设置失败')
      })
    },
    searchFiles(projectId) {
      getImages(projectId).then((res) => {
        if (res.code == 200) {
          let list = res.data.shufflingFiles == null ? [] : res.data.shufflingFiles
          this.formModal.form.imgList = list
        }
      })
    },
    filterEditModel(type) {
      let flag = ''
      switch (type) {
        case 'add':
          flag = 2
          break
        case 'edit':
          flag = 1
          break
        case 'look':
          flag = 0
          break
        default:
          flag = 0
          break
      }
      return flag
    },
    async loadData(parameter) {
      const requestParameters = Object.assign({}, parameter, this.queryParam)
      return getProjectImagesList(requestParameters).then(res => {
        return res;
      })
      /* try {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        const res = await getProjectImagesList(requestParameters)
        this.statisticsInfo.totalNum = res.totalSize
        return Promise.resolve({
          data: res.data,
          currentPage: res.currentPage,
          totalSize: res.totalSize,
        })
      } catch (e) {
        return Promise.reject(e)
      } */
    },
    handleSearch(val) {
      this.queryParam = {
        ...this.queryParam,
        query: val
      }
      this.$refs.table.refresh(true)
    },
    handleUpdate(type, data = {}) {
      this.formModal.modalType = type;
      this.formModal.form.imgList = []
      this.$nextTick(()=> {
        this.formModal.visible = true
        this.disabledClose = false;
        this.formModal.form = {
          ...this.formModal.form,
          ...data
        }
        this.searchFiles(data.projectId)
      })
    }
  }
}
</script>

<style>
  .search .ant-form-item .ant-form-item-label {
    width: 140px;
  }
  .upload-list .ant-upload-list {
    display: contents;
  }
  .upload-list .ant-upload-list-item-image::after {
    content: '';
    display: inline-block;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../../../../../assets/noPic.png");
    background-size: cover;
    background-color: #fff;
  }
</style>